<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>前端静态HTML页面自动检测更新</title>
</head>

<body>

  <h2>前端静态HTML页面自动检测更新-示例-使用 ES 模块构建版本</h2>
  <div>随便修改下页面内容，部署到web服务器后，即可体验提示更新！</div>
  <div>看清楚esm的正确用例，script加上type="module"，引入时from的是unpkg这类CDN的URL地址😘</div>
  <div>第1次，弹框点击确认。查看效果。</div>
  <div>第2次，弹框点击取消。查看效果。取消之。</div>
  <div>设置1：强制更新，用alert可行？可行。不使用confirm弹框，因点击取消还是会不断弹出提示框。来？来！取消来？来。适用大版本更新或重要更新，如v1.0到v2.0</div>
  <div>设置2：设置silent为true，就不会有轮询了！！适合悄悄上线，如改文案、修复小的Bug。</div>
  <div>设置3：silentPollingInterval为true，结果为不再轮询检测，保留页面可见性检测！！！轮询来？不来！切换或最小化会来？来！</div>
  <div>设置4：页面可见性检测，查看切换到其他标签页或最小化时，页面是否仍会轮询。默认设置为false，期望不会轮询。silentPageVisibility为true，不做页面可见状态监听	！！来？来。来？来。来？来。</div>
  <div>设置5：浏览器端不勾选"Disable cache"。这时会走304！！浏览器勾选“Disable cache”，这时会走200！验证Nginx默认走协商缓存</div>
  <script type="module">
    import { createVersionPolling } from "https://unpkg.com/version-update-polling/dist/version-update-polling.esm.js";

    createVersionPolling({
      appETagKey: "__APP_ETAG__",
      pollingInterval: 5 * 1000,
      // forceUpdate: true, // 强制更新
      // silent: true,
      // silentPollingInterval: true,
      // silentPageVisibility: false,
      onUpdate: (self) => {
        // console.log(self, '<<self');
        if (self.options.forceUpdate) {
          alert('页面有更新，点击确定刷新页面！');
          self.onRefresh();
          return;
        }
        const result = confirm("页面有更新，点击确定刷新页面！");
        if (result) {
          self.onRefresh();
        } else {
          self.onCancel();
        }
      },
    });
  </script>
</body>

</html>